import React from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import styles from "./index.module.css";
import yao1 from "./images/yao.jpg";
import yao2 from "./images/yao2.jpg";
const Index: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div className={styles.container}>
      <div className={styles.nav}>
        <NavBar title="开药门诊" onClickLeft={() => navigate("/")} />
      </div>
      {/* 卡片 */}
      <div className={styles.ping} onClick={() => navigate('/shopsearch')}>
        <div className={styles.kapian}>
          <div>
            <h2>凭方买药</h2>
            <p>须持有纸质或电子处方</p>
          </div>
          <img src={yao1} />
        </div>
        <div className={styles.liu}>
          <h3>服务流程</h3>
          <h5>第1步: 进入商城搜索处方凭证的药品并加入购物车;</h5>
          <h5>第2步: 选好药品并提交订单进入医生开药界面;</h5>
          <h5>
            第3步:
            回答处方购药合规性问题后，医生对已选购药品开具处方;药师审核通过后，即可在线支付，物流送药上门。
          </h5>
          <button>立即购药</button>
        </div>
      </div>
      <div className={styles.ping} onClick={() => navigate('/fuzhen')}>
        <div className={styles.kapian2}>
          <div>
            <h2>复诊开方</h2>
            <p>有本平台问诊开方记录</p>
          </div>
          <img src={yao2} />
        </div>
        <div className={styles.liu2}>
          <h3>服务流程</h3>
          <h5>第1步: 进入商城搜索处方凭证的药品并加入购物车;</h5>
          <h5>第2步: 选好药品并提交订单进入医生开药界面;</h5>
          <h5>
            第3步:
            回答处方购药合规性问题后，医生对已选购药品开具处方;药师审核通过后，即可在线支付，物流送药上门。
          </h5>
          <button>立即购药</button>
        </div>
      </div>
    </div>
  );
};

export default Index;
